<template>
	<view class="nav-bar-box">
		<view class="nav-bar-height" v-if="navHeight"></view>
		<view class="nav-bar" :class="{'nav-bg-box':isBg }" :style="navStyle">
			<view class="left">
				<template v-if="$slots.left">
					<slot name="left"></slot>
				</template>
				<template v-else>
					<uni-icons v-if="isback" type="back" size="24" color="#fff" @click="back"></uni-icons>
				</template>
			</view>
			<view class="title">
				<template v-if="$slots.title">
					<slot name="title"></slot>
				</template>
				<template v-else>
					{{title}}
				</template>
			</view>
			<view class="right">
				<template v-if="$slots.right">
					<slot name="right"></slot>
				</template>
				<template v-else>
					<view></view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			title: {
				type: [String, Number],
				default: ""
			},
			left: {
				type: String,
				default: ""
			},
			right: {
				type: String,
				default: ""
			},
			navStyle: {
				type: Object,
				default: () => {
					return {}
				}
			},
			navHeight: {
				type: Boolean,
				default: true
			},
			isback: {
				type: Boolean,
				default: true
			},
			onBack: {
				type: Boolean,
				default: false
			},
			isBg: {
				type: Boolean,
				default: () => {
					return true
				}
			},
		},
		created() {},
		methods: {
			back() {
				if (this.onBack) {
					this.$emit('onBack')
				} else {
					let canNavBack = getCurrentPages();
					if (canNavBack && canNavBack.length > 1) {
						uni.navigateBack({
							delta: 1
						});
					} else {
						// #ifdef APP-PLUS
						uni.navigateBack({
							delta: 1
						});
						// #endif
						// #ifndef APP-PLUS
						history.back();
						// #endif
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.nav-bar-box {
		width: 100vw;
		// height: 88rpx;

		.nav-bar-height {
			width: 100%;
			height: calc(var(--status-bar-height) + 88rpx);
		}
	}


	.nav-bar {
		width: 100vw;
		height: calc(var(--status-bar-height) + 88rpx);
		box-sizing: border-box;
		padding: var(--status-bar-height) 30rpx 0;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: transparent;
		z-index: 90;

		.title {
			position: relative;
			height: 88rpx;
			max-width: 50%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			color: #fff;
			text-align: center;
			line-height: 88rpx;
			font-size: 34rpx;
			padding: 0 34rpx;
			margin: 0 auto;
		}

		.left {
			position: absolute;
			height: 100%;
			left: 16px;
			top: var(--status-bar-height);
			line-height: 88rpx;
		}

		.right {
			position: absolute;
			height: 100%;
			right: 16px;
			top: var(--status-bar-height);
			line-height: 88rpx;
		}

		.nav-bg {}
	}

	.nav-bg-box {
		background: #fff linear-gradient(90deg, #d7b075, #aa8050);
	}
</style>
